<template>
  <div class="page">
    <div class="page-item">
      <div class="page-title">treeSelect 功能验证：</div>
      <div class="page-flex">
        <label>disabled功能验证：</label>
        <ekRadio
          v-model="fromtest.disabled"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
          @change="changeRadio"
        />
      </div>
      <div class="page-flex">
        <label>clearable功能验证：</label>
        <ekRadio
          v-model="fromtest.clearable"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>autoInit功能验证：</label>
        <ekRadio
          v-model="fromtest.autoInit"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>multiple功能验证：</label>
        <ekRadio
          v-model="fromtest.multiple"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>collapseTags功能验证：</label>
        <ekRadio
          v-model="fromtest.collapseTags"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>lazy功能验证：</label>
        <ekRadio
          v-model="fromtest.treeConfig.lazy"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>showCheckbox功能验证：</label>
        <ekRadio
          v-model="fromtest.treeConfig.showCheckbox"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>
      <div class="page-flex">
        <label>checkStrictly功能验证：</label>
        <ekRadio
          v-model="fromtest.treeConfig.checkStrictly"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>

      <div class="page-flex">
        <label>checkOnClickNode功能验证：</label>
        <ekRadio
          v-model="fromtest.treeConfig.checkOnClickNode"
          :options="[
            {
              value: true,
              label: '启用',
            },
            {
              value: false,
              label: '禁用',
            },
          ]"
        />
      </div>

      <div class="page-flex">
        <label>测试网络差环境下情况：</label>
        <el-button @click="testne()" class="mt-btn">测试</el-button>
      </div>
      <div class="page-flex">
        <label>切换options数据功能验证：</label>
        <el-button @click="testData(1)" class="mt-btn">清空数据</el-button>
        <el-button @click="testData(2)" class="mt-btn">数据1</el-button>
        <el-button @click="testData(3)" class="mt-btn">数据2</el-button>
      </div>
      <div class="page-flex">
        <label>placeholder功能验证：</label>
        <ekInput v-model="fromtest.placeholder" />
      </div>
      <div class="page-flex mt-btn">
        <label>change功能验证：{{ fromtest.change }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>blur功能验证：{{ fromtest.blur }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>focus功能验证：{{ fromtest.focus }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>input功能验证：{{ fromtest.input }}</label>
      </div>
      <div class="page-flex mt-btn">
        <label>clear功能验证：{{ fromtest.clear }}</label>
      </div>
    </div>
    <div class="page-item">
      <div>
        <ekTreeSelect
          v-if="show"
          v-model="form.input"
          :placeholder="fromtest.placeholder"
          :disabled="fromtest.disabled"
          :clearable="fromtest.clearable"
          :autoInit="fromtest.autoInit"
          :multiple="fromtest.multiple"
          :collapseTags="fromtest.collapseTags"
          :treeConfig="fromtest.treeConfig"
          url="/business/basis/getTree?modelCode=MODEL_DEPARTMENT"
          @change="change"
          @blur="blur"
          @focus="focus"
          @clear="clear"
        />
      </div>
      <div class="mt-btn">
            <ekTreeSelect 
                v-model="form.input2" 
                :disabled="fromtest.disabled" 
                :clearable="fromtest.clearable"
                :autoInit="fromtest.autoInit"
                :multiple="fromtest.multiple"
                :collapseTags="fromtest.collapseTags"
                :options="options"
                @change="change"
                @blur="blur"
                @focus="focus"
                @clear="clear"
            />
        </div>
      <!-- <formRender :form="form" :columns="columns" ref="forms"
            @change="change"
            @blur="blur"
            @focus="focus"
            @clear="clear"
        /> -->
      <el-button @click="test" class="mt-btn" style="width: 200px"
        >测试</el-button
      >
    </div>
  </div>
</template>

<script setup>
import {
  defineComponent,
  onMounted,
  getCurrentInstance,
  reactive,
  ref,
} from "vue";
import formRender from "@/components/form/formRender.vue";
import ekRadio from "@/components/form/ekRadio/index.vue";
import ekInput from "@/components/form/ekInput/index.vue";
import ekSelect from "@/components/form/ekSelect/index.vue";
import ekTreeSelect from "@/components/form/ekTreeSelect/index.vue";

let fromtest = ref({
  disabled: false,
  clearable: true,
  placeholder: "",
  autoInit: false,
  collapseTags: true,
  multiple: false,
  treeConfig: {
    lazy: false,
    showCheckbox: false,
    checkStrictly: false,
    checkOnClickNode: false,
    fieldMapping: {
        label: ['department_name','department_path'],
        id: 'id',
        parent_id: 'parent_id'
    }
    
  },
  blur: "",
  change: "",
  focus: "",
  input: "",
  clear: "",
});
let form = reactive({
  input: "",
  input2: "success",
  input3: "",
});

let columns = ref([
  {
    type: "Select",
    column: "input3",
    label: "input3",
    disabled: false,
    clearable: false,
    placeholder: "",
    url: "/business/dimension/getDimensionByCode?code=DIM_TYPE_STATE",
    rules: [{ required: true, message: "Input所有参数验证", trigger: "blur" }],
    mapping: {
      value: "dimension_code",
      label: ["dimension_code", "dimension_name"],
    },
  },
]);
const forms = ref(null);
const test = () => {
  console.log(form);
  forms.value.validate(() => {});
};

const options = ref(
    [
        {
            "id": "9",
            "parent_id": "1",
            "department_path": "1-9",
            "department_name": "山海经异兽子公司9",
            "department_state": 1,
            "ctime": 0,
            "utime": 0,
            "dtime": 0
        },

        {
            "id": "14",
            "parent_id": "9",
            "department_path": "1-9-14",
            "department_name": "法务部",
            "department_state": 1,
            "ctime": 0,
            "utime": 0,
            "dtime": 0
        },
        {
            "id": "13",
            "parent_id": "9",
            "department_path": "1-9-13",
            "department_name": "顾问部",
            "department_state": 1,
            "ctime": 0,
            "utime": 0,
            "dtime": 0
        },

    ]
);
const testData = (type) => {
  if (type == 2) {
    options.value = [
      {
            "id": "6",
            "parent_id": "1",
            "department_path": "1-9",
            "department_name": "山海经异兽子公司6",
            "department_state": 1,
            "ctime": 0,
            "utime": 0,
            "dtime": 0
        },

        {
            "id": "55",
            "parent_id": "6",
            "department_path": "1-9-14",
            "department_name": "法务部1",
            "department_state": 1,
            "ctime": 0,
            "utime": 0,
            "dtime": 0
        },
        {
            "id": "57",
            "parent_id": "6",
            "department_path": "1-9-13",
            "department_name": "顾问部2",
            "department_state": 1,
            "ctime": 0,
            "utime": 0,
            "dtime": 0
        },
    ];
  } else if (type == 3) {
    options.value = [
      {
        value: "1",
        label: "1",
      },
      {
        value: "2",
        label: "2",
      },
      {
        value: "3",
        label: "3",
      },
    ];
  } else {
    options.value = [];
  }
};

const changeRadio = () => {
  columns.value[0].disabled = fromtest.value.disabled;
};
// 失去焦点
const blur = (event) => {
  fromtest.value.blur = "blur事件:" + JSON.stringify(event);
  console.log(event, "blur");
};
// 聚焦
const focus = (event) => {
  fromtest.value.focus = "focus事件:" + JSON.stringify(event);
  console.log(event, "focus");
};
// 改变事件
const change = (event) => {
  fromtest.value.change = "change事件:" + JSON.stringify(event);
  console.log(event, "change");
};

// 实时改变事件
const clear = () => {
  fromtest.value.clear = "clear事件";
  console.log("clear");
};

const show = ref(true);
const testne = () => {
  show.value = false;
  setTimeout(() => {
    show.value = true;
  }, 1000);
};
</script>

<style scoped lang="scss">
.page {
  background-color: #f4f4f4;
  display: flex;
  .page-item {
    border: 1px solid #fff;
    padding: 10px;
    margin: 10px;
  }
  .page-title {
    font-size: 16px;
  }
  .page-flex {
    display: flex;
    align-items: center;
  }
  .mt-btn {
    margin-top: 10px;
  }
}
</style>
